<template>
	<view>
		<view class="concent">
			<view class="buyer">
				<image src="../../static/tabbar_image/message.png" ></image>
				<button class="addInfo" @click="gotoInfo"
					v-if="JSON.stringify(user_info) === '{}' || user_info.name ===''">+ 添加收货信息</button>
				<view class="information" v-else @click="gotoInfo">
					<text class="infoStyle">收货地址: {{user_info.address}}</text>
					<text class="infoStyle">收货人: {{user_info.name}}</text>
					<text class="infoStyle">电话号码: {{user_info.phone}}</text>
				</view>
			</view>
			<view class="commodity">
				<img :src=goods.pic[0] alt="">
				<view class="detail">
					<text style="font-size: 35rpx; font-weight: bold; margin-top: 75rpx;">{{goods.goods_name}}</text>
					<text>{{order_number}}</text>
				</view>
				<text
					style="font-size: 60rpx; font-weight: 800; margin-top: 60rpx; color: #c00000;">￥{{goods.price}}</text>

			</view>
			<view class="price">
				<text style="font-size: 50rpx; margin-top: 20rpx; margin-bottom: 20rpx; font-weight: bold;">价格明细</text>
				<view class="part">
					<text style="margin-left: 50rpx; margin-top: 10rpx; ">商品总价</text>
					<text style="margin-right: 20rpx;">￥{{goods.price}}</text>
				</view>
				<view class="part">
					<text>运费</text>
					<radio-group>
						<radio value="same" checked="true" @click="subTotal">自取</radio>
						<radio value="same" style="margin-left: 10rpx;" @click="addTotal">商家配送</radio>
					</radio-group>
					<text style="margin-right: 20rpx;">￥{{freight}}</text>
					</label>
				</view>
				<view class="part">
					<text>合计</text>
					<text style="margin-right: 20rpx;color: #c00000">￥{{total}}</text>
				</view>

			</view>
			<view class="check">
				<!-- <button>购买</button> -->
				<button @click="buyed"
					style="position: absolute; right:25rpx; bottom: 40rpx; width: 200rpx;height: 90rpx; background-color: #e79a00;">购买</button>
				<text>实付款：￥{{total}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		computed: {
			...mapState('buji_search', ['goods', 'order_number', 'user_info', 'order_id']),
			total() {
				return this.goods.price + this.freight //总金额
			}
		},
		data() {
			return {
				freight: 0, //运费金额
				backUrl: '/subpkg/buy/buy',
				time: 3, //跳转到首页的计时器
				timre: null, //声明定时器
			};
		},
		methods: {
			...mapMutations('buji_search', ['updateRedirectInfo', 'updateOrderId']),

			subTotal() {
				this.freight = 0
			},
			addTotal() {
				this.freight = 3
			},
			gotoInfo() {
				this.updateRedirectInfo(this.backUrl)
				uni.navigateTo({
					url: "/subpkg/info/info"
				})
			},
			buyed() {
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '确认购买该商品嘛？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "确定",
					//删除字体的颜色
					confirmColor: '#00B26A',
					//取消字体的颜色
					cancelColor: '#000000',
					success: (res)=>{
						if (res.confirm) {
							console.log('买');
							this.buyGood()
						} else {
							console.log('不买');
						}
					},
				})
			},	
			buyGood() {
				console.log("bg", this.order_id);
				console.log("******************", this.goods);
				wx.cloud.callFunction({
					name: 'buyGood',
					// complete: res => {
					// 	 console.info('complete', res);
					// },
					data: {
						order_id: this.order_id,
						avatar: this.goods.avatar,
						classify_id: this.goods.classify_id,
						goods_id: this.goods.goods_id,
						goods_name: this.goods.goods_name,
						introduce: this.goods.introduce,
						is_collected: this.goods.is_collected,
						pic: this.goods.pic,
						price: this.goods.price,
						seller_id: this.goods.seller_id,
						seller_name: this.goods.seller_name,
						time: this.goods.time,
					},
					success: res => {
						console.log('success', res);
						uni.showToast({
							icon: 'success',
							title: '购买成功'
						})
						this.timer = setInterval(() => {
							this.time--
							// 2. 判断秒数是否 <= 0
							if (this.time <= 0) {
								// 2.1 清除定时器
								clearInterval(this.timer)
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}, 1000)
					},
					fail: res => {
						console.info('fail', res);
						uni.showToast({
							icon: 'error',
							title: '购买失败'
						})
					}
				});
				this.updateOrderId();
				console.log("ed", this.order_id);
			}
		},
		onShow() {
			console.log(this.goods);
		}
	}
</script>

<style>
	.concent {
		display: flex;
		flex-direction: column;
	}

	.buyer {
		display: flex;
		flex-direction: row;
		margin-top: 80rpx;
		width: 100%;
		height: 45%;
		border: solid 1rpx;
		border-left: none;
		border-right: none;
	}

	.buyer image {
		width: 200rpx;
		height: 200rpx;
	}

	.addInfo {
		background-color: #efefef;
		margin-top: 60rpx;
		height: 50rpx;
		line-height: 50rpx;
		width: 350rpx;
	}

	.information {
		display: flex;
		flex-direction: column;
		width: 550rpx;
		justify-content: space-around;

	}

	.infoStyle {
		margin-left: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.commodity {
		margin-top: 50rpx;
		flex-direction: row;
		display: flex;
		border: solid 1rpx;
		border-left: none;
		border-right: none;
	}

	.commodity image {
		width: 250rpx;
		height: 250rpx;
	}

	.detail {
		display: flex;
		flex-direction: column;
		width: 350rpx;
		height: 250rpx;
		text-align: left;

	}

	.commodity text {
		margin-top: 20rpx;
		margin-left: 20rpx;

	}

	.price {
		margin-top: 10%;
		display: flex;
		flex-direction: column;
		border: solid 1rpx;
		border-left: none;
		border-right: none;


	}

	.part {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 85rpx;
		text-align: center;
		font-size: 35rpx;

	}

	.part text {
		margin-left: 50rpx;
	}

	.check {
		position: absolute;
		bottom: 40rpx;
		flex-direction: row-reverse;
		width: 100%;
		height: 100rpx;
	}

	.check text {
		position: absolute;
		left: 100rpx;
		font-size: 40rpx;
		color: #d60000;
	}
</style>
